<template>
  <page-container>
		<a-card>
      <div class="flex justify-between">
        <div class="flex">
          <a-button type="primary" @click="$refs.form.add()" v-access="['Menu:save']">
            <template #logo>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch">
          <a-form-item>
            <a-input v-model:value="searchData.title" placeholder="标题">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :disabled="searchData.title === ''">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
		<a-card class="mt-4">
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="items"
        :pagination="pagination"
        :loading="loading"
        @change="tableChange"
      >
        <template #bodyCell="{ record, column }">
          <a-space wrap v-if="column.dataIndex === 'operation'">
            <a-button v-access="['Menu:update']" class="text-xs" type="primary" size="small" @click="$refs.form.edit(record)">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="del(record.id)">
              <a-button class="text-xs" v-access="['Menu:del']" danger size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
          <component v-else-if="column.dataIndex === 'icon'" :is="record.icon" />
        </template>
      </a-table>
    </a-card>
		<menu-edit ref="form" @change="updated" />
  </page-container>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import MenuEdit from "./MenuEdit.vue"

export default {
	mixins: [page, list],
	components: { MenuEdit },
	data() {
		return {
			loadPath: 'menu' as string,
			searchData: {
				title: ''
			},
			columns: [
				{
					title: '菜单名称',
					dataIndex: 'title',
				},
				{
					title: '名称',
					dataIndex: 'name',
				},
				{
					title: '图标',
					dataIndex: 'icon',
				},
				{
					title: '路径',
					dataIndex: 'path',
				},
				{
					title: '页面组件',
					dataIndex: 'component',
				},
				{
					title: '所需权限',
					dataIndex: 'perm_name',
				},
				{
					title: '渲染菜单',
					dataIndex: 'renderMenu',
					customRender: (v: boolean) => (v ? '是' : '否'),
				},
				{
					width: 140,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			]
		}
	},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	}
}
</script>
